<template>
	<div>
		<list style="margin-top: 20px">
			<cell v-for="item in detailedList">
				<div class="detailed-box-content">
					<div style="display:flex;flex-direction: row;  justify-content: space-between;margin-left:35px">
						<div style="display:flex;flex-direction: row;">
							<image :src="item.thumbnail"  style="height:170px;width:170px;"></image>
							<div class="detailed-title">
								<text class="detailed-name">{{item.name}}</text>
								<text class="detailed-date">{{item.createDate}}</text>
							</div>
						</div>
					</div>
					<div class="total-content">
						<text class="order_list_content_left">押桶数{{item.stock}}桶</text>
						<div>
							<text class="order_price_number">实押金:¥{{item.price}}</text>
						</div>
					</div>
					<div v-if="item.totalInStock!=item.totalOutStock" style="margin-bottom: 20px;display:flex;flex-direction: row;  justify-content: flex-end;margin-top:20px;padding-right:35px">
						<div class="button" @click="refundClick(item)"><text style="font-size: 24px;color: white;">退桶</text></div>
					</div>
					<div v-if="item.totalInStock==item.totalOutStock" style="display:flex;flex-direction: row; justify-content: flex-end;margin-top:20px;padding-right:35px;margin-bottom: 20px">
						<div class="button_click"><text style="color: rgba(126, 128, 136, 0.8);font-size: 24px;">已退</text></div>
					</div>
					<div class="grap"></div>
				</div>
			</cell>
			<loading class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
				<!-- <text class="indicator-text">Loading ...</text> -->
				<loading-indicator class="indicator"></loading-indicator>
			</loading>
		</list>
		<div class="button_click_content">
			<div class="add_button_click" @click="toAdd"><text style="font-size: 24px;color: white;">押桶</text></div>
		</div>
	</div>
</template>
<script>
const modal = weex.requireModule('modal');

import depositSelect from '../depositSelect.vue';
import { list,refund } from '../../../../../api/virtualStock.js'
export default {
  name: '',
  props:['id'],
  data () {
    return {
		detailedList: [],
		pageNum: 1,
		pageSize: 20,
		loadinging: false
	}
  },
  components:{
	  depositSelect
  },
  created () {
	  this.loadDeposit(1)
  },
  methods: {
	  toAdd(){
		  const eeui = app.requireModule('eeui');
		  eeui.openPage({
		  		url: 'root://pages/member/memberInfo/emptyBarrel/depositSelect.js',
		  		statusBarType: 'immersion',
		  		params: {id:this.id,title:'押桶',type:'add'},	
		  		statusBarStyle: false
		  	}, () => {
                    storage.getItem('adddeposit', result => {
                        if (result.data == 'add') {
                            this.loadDeposit('')
                            storage.removeItem('adddeposit')
                        }
                    });
                })
	  },
	  refundClick(data){
		if(!this.isNull(data.orderId)){
			eeui.confirm({
					title: "温馨提示",
					message: "你确定要退桶吗？",
					buttons: ["取消", "确定"]
				},
				result => {
					if (result.status === "click" && result.title === "确定") {
								
						refund({id:data}).then(res=>{
							this.loadDeposit()
						})
					}
				}
			);
		}else{

			const eeui = app.requireModule('eeui');
			eeui.openPage({
					url: 'root://pages/member/memberInfo/emptyBarrel/depositSelect.js',
					statusBarType: 'immersion',
					params: {id:this.id,title:'退桶',type:'return'},	
					statusBarStyle: false
				}, () => {
                    storage.getItem('adddeposit', result => {
                        if (result.data == 'add') {
                            this.loadDeposit('')
                            storage.removeItem('adddeposit')
                        }
                    });
                })
		}
		 

	  },
	  loadDeposit(one) {
		this.loadinging = true;
	  	list({
	  		memberId: this.id,
	  		subType: 3,
			pageNum: this.pageNum,
			pageSize: this.pageSize
	  	}).then(res => {
	  		res.data.data.forEach(item => {
	  			item.createDate=this.formatTime(item.createDate)
	  			item.stock = parseInt(item.stock)
	  			item.price = parseFloat(item.price)
	  		})
	  		this.detailedList = [...this.detailedList, ...res.data.data]
			eeui.loadingClose();
			this.loadinging = false;
			let maxPageNum = Math.ceil(res.data.total / this.pageSize);
			if (this.pageNum > maxPageNum && !one) {
				modal.toast({ message: '已经没有更多数据', duration: 1 });
			}
	  	})
	  },
	  onloading() {
	  	// 上拉加载
	  	if (this.loadinging == false) {
	  		this.pageNum += 1;
	  		// modal.toast({ message: '加载中', duration: 1 });
	  		eeui.loading();
	  		this.loadDeposit();
	  	}
	  }
  },
}
</script>

<style scoped>
	.detailed-box-content {

		background-color: white;
		width: 750px;
		padding-top: 40px;
		box-sizing: border-box;
	}

	.detailed-title {
		margin-left: 20px;
		width: 300px;
		display: flex;
		flex-direction: column;
	}
	.button_click_content{
		display: flex;
		justify-content: center;
		align-items: flex-end;
		padding-right: 30px;
		box-sizing: border-box;
		height: 80px;
		width: 750px;
		background-color: white;
		bottom: 0;
		position: fixed;
	}
	.add_button_click{
		width: 136px;
		height: 48px;
		border-radius: 4px;
		font-size: 24px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-image: linear-gradient(129deg, rgba(237, 86, 75, 1), rgba(245, 113, 74, 1));
	}
	.detailed-name {
		font-size: 25px;
		margin-bottom: 10px;
	}

	.detailed-date {
		font-size: 25px;
		color: #808080;
	}

	.yue {
		font-size: 18px;
		font-family: PingFangSC;
		font-weight: 400;
		color: #1a1a1e;
		opacity: 0.3;
	}

	.price-content {
		display: flex;
		height: 80px;
		flex-direction: column;
		justify-content: space-between;

	}

	.price {
		float: right;
		color: #FF6347;
		font-weight: 700;
		font-size: 18px;
	}

	.total-content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 20px;
		align-items: flex-end;
		padding-right: 35px;
		padding-left: 10px;
	}

	.order_list_content_left {
		font-size: 24px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		line-height: 36px;
		opacity: 0.5;
		margin-left: 20px;
	}

	.order_price_title {
		font-size: 24px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);


	}

	.order_price_number {
		font-size: 24px;
		font-weight: 400;
		color: #eb594f;
		line-height: 36px;

	}

	.grap {
		width: 750px;
		height: 20px;
		background-color: rgb(248, 248, 248);
	}
	.button {
		font-size: 24px;
		font-weight: 400;
		color: white;
		width: 136px;
		height: 48px;
		border-radius: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		opacity: 0.8;
		background-image: linear-gradient(129deg, rgba(237, 86, 75, 1), rgba(245, 113, 74, 1));
	}

	.button_click {
		font-weight: 400;
		width: 136px;
		height: 48px;
		border-radius: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		opacity: 0.8;
		border: 1px solid;
		border-width: 1px;
		border-style: solid;
		border-color: rgba(126, 128, 136, 0.8);
	}
	.loading {
		width: 750px;
		display: -ms-flex;
		display: -webkit-flex;
		display: flex;
		-ms-flex-align: center;
		-webkit-align-items: center;
		-webkit-box-align: center;
		align-items: center;
	}
	.indicator {
		margin-top: 16px;
		height: 40px;
		width: 40px;
		color: blue;
	}
</style>
